<template>
	<view>
		<view class="" style="height: 100rpx"></view>
		<view class="top_img">{{ moodUsers.userName }}</view>
		<view class="user_box">
			<view class="user_one">
				<image @click="$previewImage(moodUsers.avatar)" :src="moodUsers.avatar" mode="aspectFill"></image>
				<view class="user_name">
					<view class="user_name_title">{{ moodUsers.nickName }}</view>
					<view class="">你好，欢迎来到同城货运管理系统</view>
				</view>
			</view>
			<view class="user_two">
				<image src="@/static/banck.png" mode="aspectFill"></image>
				<view @click="tuichu">退出</view>
			</view>
		</view>
		<view class="shuju_box">
			<view class="shuju_box_top">
				<view class="shuju_box_top_title">当月总流水(元)</view>
				<view class="shuju_box_top_flx" @click="toOverview">
					<view>更多数据</view>
					<image src="@/static/more.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="shuju_box_money">¥{{ analysisMood.totalFunds ? analysisMood.totalFunds : 0 }}</view>
			<view class="shuju_xiabox">
				<view class="shuju_xiabox_text">
					<view>总完单</view>
					<view class="shuju_xiabox_money">{{ analysisMood.totalOrderNumber }}</view>
				</view>
				<view class="shuju_xiabox_text">
					<view>完单司机</view>
					<view class="shuju_xiabox_money">{{ analysisMood.completeOrderDriver }}</view>
				</view>
				<view class="shuju_xiabox_text">
					<view>人均准点率</view>
					<view class="shuju_xiabox_money">{{ analysisMood.perPunctualityRate }}%</view>
				</view>
				<view class="shuju_xiabox_text">
					<view>人均流水</view>
					<view class="shuju_xiabox_money">¥{{ analysisMood.completeOrderDriver }}</view>
				</view>
			</view>
			<view class="page_titlk">工作台</view>
			<view class="page_icon_box">
				<view class="page_icon" v-for="(item, i) in tabelList" @click="gotoDetails(item)">
					<view class="reddot" v-if="reddot==1 && i==8"></view>
					<image :src="'../../static/indexTable/index' + i + '.png'" mode="aspectFill"></image>
					<view>{{ item }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import driver from "@/api/modules/dirver.js"
	export default {
		data() {
			return {
				tabelList: ['承运订单', '承运运单', '自营订单', '自营运单', '车队管理', '司机管理', '车辆管理', '地址库', '检查更新'],
				postData: {
					// timeDimension: 1,
					startTime: '',
					endTime: '',
					scalarStartTime: '',
					scalarEndTime: '',
					fleetId: ''
				},
				reddot: 0,
				vision: "1.1.1",
				moodUsers: {},
				analysisMood: []
			};
		},
		onShow() {
			var date_now = new Date(); //获取当前时间
			var year = date_now.getFullYear(); //获取当前时间的年份
			var month = date_now.getMonth() + 1; //获取当前时间的月份
			if (month == 1) {
				month = 1;
			}
			var day = date_now.getDate(); //获取当前时间的日
			var days = new Date(year, month, 0); //将获取到的年月赋值给days
			days = days.getDate(); //获取当前年月的日
			var year2 = year;
			var month2 = parseInt(month + 1); //获取当前月份的1一个月以后的月份
			if (month2 > 12) {
				year2 = parseInt(year2) + 1;
				month2 = parseInt(month2) % 12;
			} //考虑到12月要是获取一个月以后，就是一月，年份需要加一 ，一年没有13月，所以%12，取得来年1月
			var day2 = day;
			var days2 = new Date(year2, month2, 0);
			days2 = days2.getDate();
			if (day2 > days2) {
				day2 = days2;
			} //获取了当前年份的日和1个月以后的日，为的就是判断如果前一个月是有31号，后一个月没有，就将一个月以后的日期取到，赋值给day2
			if (month2 < 10) {
				month2 = '0' + month2;
			}

			let days1 = new Date(year, month + 1, 0).getDate();
			let days23 = new Date(year2, month2 + 1, 0).getDate();

			this.postData.startTime = year + '-' + month + '-' + 1 + ' ' + '00:00:00';
			this.postData.endTime = year + '-' + month + '-' + days1 + ' ' + '23:59:59';
			this.postData.scalarStartTime = '';
			this.postData.scalarEndTime = '';
			uni.hideTabBar();
			this.users();
			this.analysis();

			this.reddot = 0;
			let systemInfo = uni.getSystemInfoSync();
			let vision = systemInfo.appVersion;
			driver.queryVision({}).then((res) => {
				if (res.data.data.supplierApp != vision) {
					this.reddot = 1;
					this.vision = res.data.data.supplierApp;
				}
			})
		},
		methods: {
			tuichu() {
				uni.reLaunch({
					url: '/pages/index/login',
					success() {
						uni.removeStorageSync('token')
					}
				})
			},
			formatSeconds(value) {
				var theTime = parseInt(value / 1000); // 秒
				var theTime1 = 0; // 分
				var theTime2 = 0; // 小时
				if (theTime > 60) {
					theTime1 = parseInt(theTime / 60);
					theTime = parseInt(theTime % 60);
					if (theTime1 > 60) {
						theTime2 = parseInt(theTime1 / 60);
						theTime1 = parseInt(theTime1 % 60);
					}
				}
				var result = '' + parseInt(theTime);
				if (result < 10) {
					result = '0' + result;
				}
				if (theTime1 > 0) {
					result = '' + parseInt(theTime1);
					if (theTime1 < 10) {
						result = '0' + result;
					}
				} else {
					result = 0;
				}

				if (theTime2 > 0) {
					result = '' + parseInt(theTime2) + '时' + result + '分钟';
					if (theTime2 < 10) {
						result = '0' + result;
					}
				} else {
					result = 0;
				}
				return result;
			},
			async analysis() {
				let res = await this.$http.users.getOperational(this.postData);
				this.analysisMood = res.data.data;
				this.analysisMood.perCapitaOnlineDuration = this.formatSeconds(this.analysisMood
					.perCapitaOnlineDuration * 1);
				this.analysisMood.perDurationScalarValue = this.formatSeconds(this.analysisMood
					.perDurationScalarValue * 1);
			},
			async users() {
				let res = await this.$http.users.getSupplierUserInfo();
				if (res.data.code == 200) {
					this.moodUsers = res.data.data;
				}
			},
			toOverview() {
				uni.navigateTo({
					url: '/subPackages/overview/overview'
				});
			},
			gotoDetails(item) {
				switch (item) {
					case '车队管理':
						uni.navigateTo({
							url: '/subPackages/fleetManagement/fleetManagement'
						});
						break;
					case '司机管理':
						uni.navigateTo({
							url: '/subPackages/driverManagement/driverManagement'
						});
						break;
					case '地址库':
						uni.navigateTo({
							url: '/subPackages/addressManagement/addressManagement'
						});
						break;
					case '车辆管理':
						uni.navigateTo({
							url: '/subPackages/vehicleManagement/vehicleManagement'
						});
						break;
					case '承运订单':
						uni.navigateTo({
							url: '/subPackages/carriage/carriage'
						});
						break;
					case '承运运单':
						uni.navigateTo({
							url: '/subPackages/carrierWaybill/carrierWaybill'
						});
						break;
					case '自营订单':
						uni.navigateTo({
							url: '/subPackages/Selfwaybill/Selfwaybill'
						});
						break;
					case '自营运单':
						uni.navigateTo({
							url: '/subPackages/selfTransport/selfTransport'
						});
						break;
					case '检查更新':
						if(this.reddot==1){
							uni.navigateTo({
								url: '/subPackages/selfTransport/newVision'
							});
						}else{
							uni.showToast({
								title: '已经是最新版本了',
								icon: 'none'
							})
						}
						break;
				}
			}
		}
	};
</script>

<style scoped>
	.reddot {
		position: absolute;
		width: 6px;
		height: 6px;
		background: #DD001B;
		border: 0px;
		border-radius: 3px;
		right: 30px;
	}

	.page_icon_box {
		margin-top: 30rpx;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.page_icon image {
		width: 50rpx;
		height: 50rpx;
		margin-bottom: 10rpx;
	}

	.page_icon {
		width: 25%;
		font-size: 28rpx;
		color: #606060;
		text-align: center;
		margin-top: 30rpx;
		position: relative;
	}

	.page_titlk {
		font-weight: 600;
		font-size: 36rpx;
		color: #262626;
		margin-left: 25rpx;
		margin-top: 85rpx;
	}

	.shuju_xiabox_text {
		font-size: 24rpx;
		color: #606060;
		text-align: center;
	}

	.shuju_xiabox_money {
		font-size: 32rpx;
		font-weight: 600;
		color: #262626;
		margin-top: 10rpx;
	}

	.shuju_xiabox {
		width: 560rpx;
		height: 148rpx;
		border-radius: 16rpx;
		background-color: #93e2ff;
		margin-left: 40rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.shuju_box_money {
		font-size: 50rpx;
		font-weight: 600;
		margin-left: 40rpx;
		margin-top: 25rpx;
	}

	.shuju_box_top_flx {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #606060;
		margin-right: 40rpx;
	}

	.shuju_box_top_flx image {
		width: 12rpx;
		height: 12rpx;
		margin-left: 10rpx;
	}

	.shuju_box_top_title {
		font-size: 26rpx;
		color: #262626;
		margin-left: 40rpx;
	}

	.shuju_box_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 60rpx;
	}

	.top_img {
		margin-top: 40rpx;
		margin-left: 30rpx;
		font-size: 40rpx;
		font-weight: 600;
	}

	.user_one {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		margin-top: 76rpx;
	}

	.user_one image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}

	.user_name {
		font-size: 24rpx;
		color: #767778;
		margin-left: 15rpx;
	}

	.user_name_title {
		font-size: 36rpx;
		font-weight: 600;
		color: #262626;
	}

	.user_two {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		margin-top: 60rpx;
	}

	.user_two image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.user_box {
		width: 90%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shuju_box {
		width: 690rpx;
		height: 391rpx;
		border-radius: 20rpx;
		background-image: linear-gradient(180deg, #29b0fd 10%, #93e2ff 150%);
		margin-top: 35rpx;
		margin-left: 30rpx;
	}
</style>